<template>
    <!-- 圆形进度条 -->
    <view class="">
        <l-circularProgress :fontShow="false" bgColor="#ffffff" :lineWidth="5" boxWidth="90" boxHeight="90"  
            :percent="detectValue" style="position: relative;">
            <view class="centerTxtSpecial" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
                <view class="numSpecial">{{detectValue}}%</view>
                <view class="txtSpecial">健康评分</view>
            </view>
        </l-circularProgress>
    </view>
</template>
<script>
export default {
    name: "progress",
    props: {
        detectValue: {
            type: Number,
            default: 30
        }
    },
    data() {
        return {
            displayValue: 0
        }
    },
    methods: {
        
    }
}
</script>

<style>
	.centerTxtSpecial {
		position: absolute;
		top: 50%;
		left: 47%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	 
	.numSpecial {
		font-size: 30rpx;
		font-family: Arial;
		color: #4de1b4;
	}
	 
	.txtSpecial {
		width: 100rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999;
		margin-top: 8rpx;
	}
</style>
